<!-- 商品属性 -->
<template>
  <div class="goods-attr">
    <div class="goods-attr-box">
      <div class="header">规格列表</div>
      <div class="btn-box">
        <el-button size="small" type="primary">添加规格模板</el-button>
      </div>
      <el-table :data="goodsAttrData" style="width: 100%">
        <el-table-column label="#" width="100" type="index"></el-table-column>
        <el-table-column label="规格名称" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.attr_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="属性排序" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.attr_sort }}</span>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" width="220">
          <template slot-scope="scope">
            <span>{{ scope.row.add_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="goodsAttrEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="goodsAttrDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      formInline: {
        txt: ""
      },
      goodsAttrData: []
    };
  },
  created() {
    this.$http.getGoodsAttr().then(res => {
      if (res && res.data.code === 200) {
        // console.log(res)
        this.goodsAttrData = res.data.data
      }
    });
  },
  methods: {
    goodsAttrEdit() {
      // this.$router.push('/dashboard/goods')
    },
    goodsAttrDelete(index, item)  {
      this.$confirm("此操作将删除该属性, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http.removeGoodsAttr({ id: item.id }).then(res => {
            console.log(res);
            if (res && res.data.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.reload();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style scoped lang="less">
.goods-attr {
  .goods-attr-box {
    background: #fff;
    // margin: 8px;
    border-radius: 2px;
    .btn-box {
      padding: 10px;
      padding-left: 15px;
    }
  }
  .header {
    position: relative;
    height: 42px;
    line-height: 42px;
    padding: 0 15px;
    border-bottom: 1px solid #f6f6f6;
    color: #333;
    font-size: 14px;
  }
  .el-table {
    padding: 15px;
    padding-top: 0;
    .el-form--inline {
      .el-form-item {
        // margin-bottom: -2px;
      }
    }
  }
}
</style>
